import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import LanguageSwitcher from './LanguageSwitcher';
import './LandingPage.css';

const LandingPage = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isTextVisible, setIsTextVisible] = useState(false);
  
  // Check for mock authentication
  const isAuthenticated = !!localStorage.getItem('mockAuthToken');
  const user = isAuthenticated ? JSON.parse(localStorage.getItem('mockUser') || '{}') : null;
  
  const handleLogout = () => {
    localStorage.removeItem('mockAuthToken');
    localStorage.removeItem('mockUser');
    navigate('/auth');
  };

  const features = [
    {
      title: t('landing.featureTimeTravel.title'),
      description: t('landing.featureTimeTravel.description'),
      icon: '⏰',
      details: t('landing.featureTimeTravel.details')
    },
    {
      title: t('landing.featureSmartClassify.title'),
      description: t('landing.featureSmartClassify.description'),
      icon: '🤖',
      details: t('landing.featureSmartClassify.details')
    },
    {
      title: t('landing.featureEternalSave.title'),
      description: t('landing.featureEternalSave.description'),
      icon: '🔗',
      details: t('landing.featureEternalSave.details')
    },
    {
      title: t('landing.featureTimeShare.title'),
      description: t('landing.featureTimeShare.description'),
      icon: '🌌',
      details: t('landing.featureTimeShare.details')
    },
    {
      title: t('landing.featureEmotionAnalysis.title'),
      description: t('landing.featureEmotionAnalysis.description'),
      icon: '💭',
      details: t('landing.featureEmotionAnalysis.details')
    },
    {
      title: t('landing.featureTimeCapsule.title'),
      description: t('landing.featureTimeCapsule.description'),
      icon: '📦',
      details: t('landing.featureTimeCapsule.details')
    }
  ];

  useEffect(() => {
    // Trigger text animation after component mounts
    const timer = setTimeout(() => setIsTextVisible(true), 500);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    // Auto-rotate feature slides
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % features.length);
    }, 4000);
    return () => clearInterval(interval);
  }, [features.length]);

  const handleGetStarted = () => {
    if (isAuthenticated) {
      navigate('/dashboard');
    } else {
      navigate('/auth');
    }
  };

  const handleSlideChange = (index) => {
    setCurrentSlide(index);
  };

  return (
    <div className="landing-container">
      {/* Time Tunnel Background */}
      <div className="time-tunnel">
        <div className="tunnel-particles"></div>
        <div className="tunnel-rings">
          {[...Array(8)].map((_, i) => (
            <div key={i} className={`ring ring-${i + 1}`}></div>
          ))}
        </div>
        <div className="character-silhouette">
          <div className="character-glow"></div>
        </div>
      </div>

      {/* Navigation Header */}
      <header className="landing-header">
        <div className="logo">
          <span className="logo-icon">⏳</span>
          <span className="logo-text">时光相册</span>
        </div>
        <nav className="nav-menu">
          <a href="#features" className="nav-link">{t('landing.navFeatures')}</a>
          <a href="#about" className="nav-link">{t('landing.navAbout')}</a>
          <a href="#contact" className="nav-link">{t('landing.navContact')}</a>
        </nav>
        <div className="header-actions">
          <LanguageSwitcher />
          {isAuthenticated && user ? (
            <div className="user-menu">
              <div className="user-avatar">
                <span>{user.name.charAt(0).toUpperCase()}</span>
              </div>
              <div className="user-dropdown">
                <div className="user-info">
                  <div className="user-name">{user.name}</div>
                  <div className="user-email">{user.email || user.phone}</div>
                </div>
                <button className="logout-btn" onClick={handleLogout}>
                  {t('landing.logout')}
                </button>
              </div>
            </div>
          ) : (
            <button
              className="auth-button"
              onClick={handleGetStarted}
            >
              {t('landing.loginRegister')}
            </button>
          )}
        </div>
      </header>

      {/* Hero Section */}
      <section className="hero-section">
        <div className={`hero-content ${isTextVisible ? 'visible' : ''}`}>
          <h1 className="hero-title">
            <span className="title-gradient">{t('landing.heroTitle')}</span>
            <br />
            <span className="title-secondary">{t('landing.heroSubtitle')}</span>
          </h1>
          <p className="hero-subtitle">
            {t('landing.heroDescription')}
          </p>
          <div className="hero-buttons">
            <button
              className="primary-button"
              onClick={handleGetStarted}
            >
              {isAuthenticated ? t('landing.enterMyAlbum') : t('landing.startJourney')}
            </button>
            <button className="secondary-button">
              {t('landing.learnMore')}
            </button>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="features-section">
        <h2 className="section-title">{t('landing.exploreFeatures')}</h2>
        <div className="features-carousel">
          <div 
            className="features-slider"
            style={{ transform: `translateX(-${currentSlide * 100}%)` }}
          >
            {features.map((feature, index) => (
              <div key={index} className="feature-card">
                <div className="feature-icon">{feature.icon}</div>
                <h3 className="feature-title">{feature.title}</h3>
                <p className="feature-description">{feature.description}</p>
              </div>
            ))}
          </div>
          <div className="feature-dots">
            {features.map((_, index) => (
              <button
                key={index}
                className={`dot ${index === currentSlide ? 'active' : ''}`}
                onClick={() => handleSlideChange(index)}
              />
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="about-section">
        <div className="about-content">
          <div className="about-text">
            <h2 className="section-title">{t('landing.aboutTitle')}</h2>
            <p className="about-description">
              {t('landing.aboutDescription1')}
            </p>
            <p className="about-description">
              {t('landing.aboutDescription2')}
            </p>
            <div className="tech-highlights">
              <h3>{t('landing.coreTech')}</h3>
              <div className="tech-grid">
                <div className="tech-item">
                  <span className="tech-icon">⚛️</span>
                  <span className="tech-name">{t('landing.quantumStorage')}</span>
                </div>
                <div className="tech-item">
                  <span className="tech-icon">🧠</span>
                  <span className="tech-name">{t('landing.neuralNetwork')}</span>
                </div>
                <div className="tech-item">
                  <span className="tech-icon">🔐</span>
                  <span className="tech-name">{t('landing.quantumEncryption')}</span>
                </div>
                <div className="tech-item">
                  <span className="tech-icon">🌐</span>
                  <span className="tech-name">{t('landing.distributedNetwork')}</span>
                </div>
              </div>
            </div>
            <div className="stats">
              <div className="stat-item">
                <span className="stat-number">10M+</span>
                <span className="stat-label">{t('landing.usersTrust')}</span>
              </div>
              <div className="stat-item">
                <span className="stat-number">500M+</span>
                <span className="stat-label">{t('landing.photosSaved')}</span>
              </div>
              <div className="stat-item">
                <span className="stat-number">99.9%</span>
                <span className="stat-label">{t('landing.securityGuarantee')}</span>
              </div>
            </div>
          </div>
          <div className="about-visual">
            <div className="floating-cube">
              <div className="cube-face cube-front">时光</div>
              <div className="cube-face cube-back">记忆</div>
              <div className="cube-face cube-left">永恒</div>
              <div className="cube-face cube-right">珍藏</div>
              <div className="cube-face cube-top">瞬间</div>
              <div className="cube-face cube-bottom">永恒</div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="testimonials-section">
        <div className="testimonials-container">
          <div className="testimonials-content">
            <h2 className="section-title">{t('landing.userTestimonials')}</h2>
            <div className="testimonials-grid">
              <div className="testimonial-card">
                <div className="testimonial-content">
                  "{t('landing.testimonial1.content')}"
                </div>
                <div className="testimonial-author">
                  <div className="author-avatar">👨‍🚀</div>
                  <div className="author-info">
                    <div className="author-name">{t('landing.testimonial1.author')}</div>
                    <div className="author-title">{t('landing.testimonial1.title')}</div>
                  </div>
                </div>
              </div>
              <div className="testimonial-card">
                <div className="testimonial-content">
                  "{t('landing.testimonial2.content')}"
                </div>
                <div className="testimonial-author">
                  <div className="author-avatar">👩‍🔬</div>
                  <div className="author-info">
                    <div className="author-name">{t('landing.testimonial2.author')}</div>
                    <div className="author-title">{t('landing.testimonial2.title')}</div>
                  </div>
                </div>
              </div>
              <div className="testimonial-card">
                <div className="testimonial-content">
                  "{t('landing.testimonial3.content')}"
                </div>
                <div className="testimonial-author">
                  <div className="author-avatar">🧑‍🎓</div>
                  <div className="author-info">
                    <div className="author-name">{t('landing.testimonial3.author')}</div>
                    <div className="author-title">{t('landing.testimonial3.title')}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="cta-section">
        <div className="cta-content">
          <h2 className="cta-title">{t('landing.ctaTitle')}</h2>
          <p className="cta-subtitle">{t('landing.ctaSubtitle')}</p>
          <button
            className="cta-button"
            onClick={handleGetStarted}
          >
            {isAuthenticated ? t('landing.enterTimeAlbum') : t('landing.startNow')}
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="landing-footer">
        <div className="footer-content">
          <div className="footer-logo">
            <span className="logo-icon">⏳</span>
            <span className="logo-text">时光相册</span>
          </div>
          <div className="footer-links">
            <div className="footer-column">
              <h4>{t('landing.footerProduct')}</h4>
              <a href="#">{t('landing.footerFeatures')}</a>
              <a href="#">{t('landing.footerPricing')}</a>
              <a href="#">{t('landing.footerUpdates')}</a>
            </div>
            <div className="footer-column">
              <h4>{t('landing.footerCompany')}</h4>
              <a href="#">{t('landing.footerAboutUs')}</a>
              <a href="#">{t('landing.footerBlog')}</a>
              <a href="#">{t('landing.footerCareers')}</a>
            </div>
            <div className="footer-column">
              <h4>{t('landing.footerSupport')}</h4>
              <a href="#">{t('landing.footerHelpCenter')}</a>
              <a href="#">{t('landing.footerContactUs')}</a>
              <a href="#">{t('landing.footerPrivacyPolicy')}</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>&copy; 2023 时光相册. {t('landing.footerRights')}.</p>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;